import React, { useEffect } from 'react'


import tMap from './index.module.css'


function Tmap() {
    //js全局变量
    let TMap;
    //默认地图的中心点
    let defaultCenter;
    //地图
    let map;
    //marker
    let markerLayer;
    //信息窗口
    let infoWindow;


    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        initTmap();

        return () => {

        }
    }, []);

    function handleScriptCreate() {
        //js开始创建
    }

    function handleScriptError() {
        //js加载失败
    }

    function handleScriptLoad() {
        //js加载成功
        initTmap();
    }

    //初始化地图
    function initTmap() {
        TMap = window.TMap;
        //英德市的默认经纬度
        defaultCenter = new TMap.LatLng(24.205024, 113.402376);
        map = new TMap.Map('container', {
            center: defaultCenter,//设置地图中心点坐标
            zoom: 10,   //设置地图缩放级别
            pitch: 45,  //设置俯仰角
            rotation: 0,    //设置地图旋转角度
            viewMode: '2D',
        });
        //移除缩放控件，如果map上不存在该控件则直接返回
        if (!map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)) {
            return;
        }
        map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
        map.on("tilesloaded", function () {
            //地图加载完成
        });
        //监听redux中的状态，只要变化就调用render
        //const currentCenter = new TMap.LatLng(latitude, longitude);
        //初始化marker图层
        if (typeof (markerLayer) != "undefined") {
            markerLayer.setGeometries([])
            markerLayer.setMap(null);
            markerLayer = null;
        }
        markerLayer = new TMap.MultiMarker({
            id: '123456789', map: map, geometries: [{
                "id": 'demo', "styleId": 'marker', "position": defaultCenter, "properties": {
                    "title": "marker"
                }
            }]
        });
        //初始化infoWindow
        if (typeof (infoWindow) != "undefined") {
            infoWindow.setMap(null);
            infoWindow = null;
        }
        infoWindow = new TMap.InfoWindow({
            map: map, position: defaultCenter, //设置信息框位置
            content: '当前位置：' + 'xxxxx',//设置信息框内容
            zIndex: 10, //信息窗的z-index值
            offset: { x: 0, y: -50 }, //向上偏移35像素坐标，向左偏移3像素坐标
        });
        //设置中心点
        map.setCenter(defaultCenter);
        map.easeTo({ zoom: 17, rotation: 90 }, { duration: 2000 });//平滑缩放,旋转到指定级别
        //监听地图平移
        map.on("pan", function () {
            //获取中心点
            //const center = map.getCenter().toString();
            //分割字符串，获得经纬度
            //let latLngList = center.split(",")
            //const latLng = new TMap.LatLng(latLngList[0], latLngList[1]);
            //先清空marker再在地图上添加
            //markerLayer.setGeometries([])
            //markerLayer.add({
            //    position: latLng
            //});
        })
        //监听地图平移结束
        map.on("panend", function () {
            //根据经纬度逆地理编码获得地址
        })
    }


    //渲染组件
    return (<div>
        <div className={tMap.location} style={{ width: '100%', height: '30vh' }} id="container"></div>
    </div>)
}

export default Tmap

